<template>
    <div class="login-vue" :style="bg">
        <div class="container">
            <p class="title">WELCOME-绿码易通</p>
            <div class="input-c">
                <Input prefix="ios-contact" v-model="account" placeholder="手机号" clearable @on-blur="verifyAccount"/>
                <p class="error">{{accountError}}</p>
            </div>
            <div class="input-c">
                <Input type="password" v-model="pwd" prefix="md-lock" placeholder="密码" clearable @on-blur="verifyPwd"/>
                <p class="error">{{pwdError}}</p>
            </div>
            <Button :loading="isShowLoading" class="submit" type="primary" @click="tencentCap">登陆</Button>
<!--            <p class="account"><span @click="register">注册账号</span> | <span @click="forgetPwd">忘记密码</span></p>-->
        </div>
    </div>
</template>
<script>
    import "../utils/TCaptcha";
    import {setToken} from "../utils/token";
    import store from "../store";
    import {Message} from "element-ui";

    const os = require("os")
    export default {
        name: 'login',
        data() {
            return {
                captcha: Object,
                AppId: '2007299557',
                account: '13245888413',
                pwd: '123456',
                accountError: '',
                pwdError: '',
                isShowLoading: false,
                bg: {},
                result: {}, //请求返回的账号数据
                ip: ''
            }
        },
        created() {
            this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
        },
        watch: {
            $route: {
                handler: function (route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },
        methods: {
            getUserIP(onNewIP) {

                let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
                let pc = new MyPeerConnection({
                    iceServers: []
                });
                let noop = () => {
                };
                let localIPs = {};
                let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
                let iterateIP = (ip) => {
                    if (!localIPs[ip]) onNewIP(ip);
                    localIPs[ip] = true;
                };

                pc.createDataChannel('');
                pc.createOffer().then((sdp) => {
                    sdp.sdp.split('\n').forEach(function (line) {
                        if (line.indexOf('candidate') < 0) return;
                        line.match(ipRegex).forEach(iterateIP);
                    });
                    pc.setLocalDescription(sdp, noop, noop);
                }).catch((reason) => {
                });

                pc.onicecandidate = (ice) => {
                    if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
                    ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
                };

            },
            tencentCap() {
                let that = this;
                this.getUserIP((ip) => {
                    this.ip = ip;
                });
                console.log(this.ip)
                this.captcha = new TencentCaptcha(
                    this.AppId,
                    function (res) {
                        that.loginAdmin(res);
                    }
                );
                this.captcha.show();
            },
            loginAdmin(res) {
                this.isShowLoading = true
                this.request({
                    url: '/captcha/tencent',
                    method: 'get',
                    params: {Ticket: res.ticket, Randstr: res.randstr, UserIp: this.ip}
                }).then(response => {
                    //正式登录
                    this.request({
                        url: '/login/admin',
                        method: 'get',
                        params: {username: this.account, password: this.pwd}
                    }).then(res => {
                        // 登陆成功 假设这里是后台返回的 token
                        this.$Message.success('登录成功');
                        setToken(res.token)
                        this.$router.push({path: this.redirect || '/'})
                    })
                }).finally(() => {
                    this.isShowLoading = false
                })


            },
            verifyAccount(e) {
                if (this.account === '') {
                    this.accountError = '账号不能为空'
                } else {
                    this.accountError = ''
                }
            },
            verifyPwd(e) {
                if (this.pwd === '') {
                    this.pwdError = '密码不能为空'
                } else {
                    this.pwdError = ''
                }
            },
            register() {
                console.log('注册账号')
            },
            forgetPwd() {
                console.log('忘记密码')
            }
        }
    }
</script>

<style>
    .login-vue {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    .login-vue .container {
        background: rgba(255, 255, 255, .5);
        width: 300px;
        text-align: center;
        border-radius: 10px;
        padding: 30px;
    }

    .login-vue .ivu-input {
        background-color: transparent;
        color: #fff;
        outline: #fff;
        border-color: #fff;
    }

    .login-vue ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: rgba(255, 255, 255, .8);
    }

    .login-vue :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: rgba(255, 255, 255, .8);
    }

    .login-vue ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: rgba(255, 255, 255, .8);
    }

    .login-vue :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: rgba(255, 255, 255, .8);
    }

    .login-vue .title {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .login-vue .input-c {
        margin: auto;
        width: 200px;
    }

    .login-vue .error {
        color: red;
        text-align: left;
        margin: 5px auto;
        font-size: 12px;
        padding-left: 30px;
        height: 20px;
    }

    .login-vue .submit {
        width: 200px;
    }

    .login-vue .account {
        margin-top: 30px;
    }

    .login-vue .account span {
        cursor: pointer;
    }

    .login-vue .ivu-icon {
        color: #eee;
    }

    .login-vue .ivu-icon-ios-close-circle {
        color: #777;
    }
</style>


